<template>
  <div class="digital-human-connecting">
    <div class="connecting-content">
      <!-- 连接动画 -->
      <div class="connecting-animation">
        <div class="avatar-placeholder">
          <div class="avatar-circle">
            <div class="avatar-inner"></div>
          </div>
        </div>
        <div class="connecting-waves">
          <div class="wave wave-1"></div>
          <div class="wave wave-2"></div>
          <div class="wave wave-3"></div>
        </div>
      </div>
      
      <!-- 连接文本 -->
      <div class="connecting-text">
        <h3>正在连接数字人</h3>
        <p>{{ connectingMessage }}</p>
        <div class="progress-dots">
          <span class="dot" :class="{ active: dotIndex >= 0 }"></span>
          <span class="dot" :class="{ active: dotIndex >= 1 }"></span>
          <span class="dot" :class="{ active: dotIndex >= 2 }"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const connectingMessage = ref('正在初始化...')
const dotIndex = ref(0)

// 连接步骤消息
const connectingSteps = [
  '正在初始化...',
  '正在连接服务器...',
  '正在加载数字人模型...',
  '正在建立音视频连接...',
  '即将完成连接...'
]

let messageInterval: number | null = null
let dotInterval: number | null = null

// 生命周期
onMounted(() => {
  // 循环显示连接消息
  let stepIndex = 0
  messageInterval = window.setInterval(() => {
    connectingMessage.value = connectingSteps[stepIndex]
    stepIndex = (stepIndex + 1) % connectingSteps.length
  }, 2000)

  // 进度点动画
  dotInterval = window.setInterval(() => {
    dotIndex.value = (dotIndex.value + 1) % 4
  }, 500)
})

onUnmounted(() => {
  if (messageInterval) {
    clearInterval(messageInterval)
  }
  if (dotInterval) {
    clearInterval(dotInterval)
  }
})
</script>

<style scoped>
.digital-human-connecting {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.connecting-content {
  text-align: center;
  max-width: 400px;
  padding: 2rem;
}

.connecting-animation {
  position: relative;
  margin-bottom: 2rem;
}

.avatar-placeholder {
  position: relative;
  display: inline-block;
}

.avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 3s ease-in-out infinite;
}

.avatar-inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  animation: pulse 2s ease-in-out infinite;
}

.connecting-waves {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: wave-expand 3s ease-out infinite;
}

.wave-1 {
  animation-delay: 0s;
}

.wave-2 {
  animation-delay: 1s;
}

.wave-3 {
  animation-delay: 2s;
}

.connecting-text h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.connecting-text p {
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
  opacity: 0.8;
  min-height: 1.5rem;
}

.progress-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.dot.active {
  background: white;
  transform: scale(1.2);
}

/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

@keyframes wave-expand {
  0% {
    width: 120px;
    height: 120px;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .connecting-content {
    padding: 1rem;
  }
  
  .avatar-circle {
    width: 100px;
    height: 100px;
  }
  
  .avatar-inner {
    width: 60px;
    height: 60px;
  }
  
  .connecting-text h3 {
    font-size: 1.25rem;
  }
  
  .connecting-text p {
    font-size: 0.875rem;
  }
}
</style>
